<template>
    <EdDialog ref="dialogRef" v-if="showCode" width="'980px'" title="选择地址" @close-dialog="closeDialog"
              @save-dialog="saveDialog">
        <div class="edExportBox">
            <el-input style="width: 192px;height: 32px;" id="tipinput" size="small" v-model="input"
                      placeholder="请输入搜索地址" suffix-icon="el-icon-search"></el-input>
            <el-button type="primary" size="small" class="el-button-primary-style" style="width: 65px;margin-left: 12px"
                       @click="search">搜 索</el-button>
            <div v-if="query.address" class="marginTop10">
                <span class="fontSize12 colorMain marginRight20 marginLeft10">经度：{{ query.lnglat.lng }}</span>
                <span class="fontSize12 colorMain marginRight20">纬度：{{ query.lnglat.lat }}</span>
                <span class="fontSize12 colorMain" v-if="query.address">地址：{{ query.address }}</span>
            </div>

            <div id="container" class="containerMap marginTop10" style="width: 100%;height: 460px"></div>
        </div>
    </EdDialog>

</template>

<script>
import EdDialog from 'src/components/EdDialog.vue'
import { loadAMap } from 'src/components/AMap/AMapLoader'
export default {
    name: "EdMap",
    components: {
        EdDialog
    },
    props: {
        edMapObj: {
            type: Object,
        }
    },
    data() {
        return {
            showCode: false,
            input: "",
            map: null,
            marker: null,
            innerText: "",
            autocompleteE: null,
            query: {
                lnglat: "",
                address: ""
            }
        }
    },
    created() {

    },
    mounted() {

    },
    methods: {
        showMap() {
            this.showCode = true;
            this.input = "";
            this.$nextTick(() => {
                this.init();
            })
        },
        init() {
            loadAMap({
                plugins: ["AMap.CitySearch", "AMap.Scale", "AMap.ToolBar", "AMap.AutoComplete", 'AMap.PlaceSearch', "AMap.Geolocation", "AMap.Geocoder"]
            }).then(() => {
                this.map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom: 18
                });

                //编辑的是设置地址
                if (this.edMapObj.lngLat) {
                    this.query.lnglat = { lng: this.edMapObj.lngLat.split(",")[0], lat: this.edMapObj.lngLat.split(",")[1] };
                    this.query.address = this.edMapObj.address;
                    this.addMaker(this.edMapObj.lngLat.split(","), this.edMapObj.address);
                }
                const _this = this;
                _this.mapOn();
                this.map.addControl(new AMap.ToolBar());
                const autoOptions = {
                    input: "tipinput"//使用联想输入的input的id
                };

                const autocomplete = new AMap.AutoComplete(autoOptions);
                autocomplete.on('select', function (e) {
                    _this.map.clearMap(); // 清除地图所有maker
                    _this.map.setCenter(e.poi.location);
                    _this.map.setZoom(18)
                })
                _this.map.getCity(function (info) {
                    console.log(info)
                    autocomplete.setCity(info.citycode)
                });
            })
        },
        // 地图初始化之后可以直接点击实现地址转换并标记
        mapOn() {
            const _this = this;
            _this.map.on('click', function (e) {
                _this.geocoderFn(e.lnglat);
            })
        },
        showInfoClick(e) {
            this.geocoderFn(e.lnglat);
        },
        addMaker(lnglat, address) {
            this.map.clearMap();
            this.marker = new AMap.Marker({
                position: lnglat,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            });

            this.marker.setMap(this.map)
            this.marker.setLabel({
                offset: new AMap.Pixel(5, 5),  //设置文本标注偏移量
                content: address, //设置文本标注内容
                direction: 'right' //设置文本标注方位
            });
        },
        // 逆地理编码 经纬度转地址
        geocoderFn(lnglat) {
            const _this = this;
            let geocoder = new AMap.Geocoder({
                city: "010", //城市设为北京，默认：“全国”
                radius: 1000 //范围，默认：500
            });

            geocoder.getAddress(lnglat, function (status, result) {
                if (status === 'complete' && result.regeocode) {
                    let address = result.regeocode.formattedAddress;
                    _this.query.lnglat = lnglat;
                    _this.query.address = address;
                    _this.addMaker(lnglat, address)
                } else {
                    _this.$message.info({
                        message: "根据经纬度查询地址失败",
                        duration: 2000,
                        center: true
                    })
                }
            });
        },
        search() {
            if (this.input) {
                const _this = this;
                const placeSearch = new AMap.PlaceSearch({
                    city: '',
                    map: _this.map
                });
                placeSearch.search(this.input, (status, e) => {
                    if (status == "complete") {
                        _this.map.clearMap();
                        if (e.poiList.pois[0]) {
                            _this.map.setCenter(e.poiList.pois[0].location)
                            _this.map.setZoom(18)
                        }
                    } else {
                        _this.$message.info({
                            message: "根据经纬度查询地址失败",
                            duration: 2000,
                            center: true
                        })
                    }
                });
            } else {
                this.$message.info({
                    message: "请输入搜索地址",
                    duration: 2000,
                    center: true
                })
            }

        },
        saveDialog() {
            this.$emit("setAddress", this.query);
            this.showCode = false;
        },
        closeDialog() {
            this.query = {
                lnglat: "",
                address: ""
            };
            this.showCode = false;
        }
    }
}
</script>

<style lang="scss">
.containerMap {
    .amap-geolocation {
        bottom: 95px !important;
        right: 20px !important;
    }
}

.amap-sug-result {
    z-index: 3000;
}
</style>